<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <!-- 基础信息 -->
      <a-card :bordered="false" style="margin-top:24px;">
        <div class="card-title">基础信息</div>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="公司编号" prop="orderCode">
              <a-input v-model="form.orderCode" disabled />
            </a-form-model-item>
            <a-form-model-item label="箱型" prop="containerTypeId">
              <a-select v-model="form.containerTypeId" disabled>
                <a-select-option value>请选择箱型</a-select-option>
                <a-select-option
                  v-for="(item,index) in containerList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="货名" prop="goodsName">
              <a-input v-model="form.goodsName" disabled />
            </a-form-model-item>
            <a-form-model-item label="结算类型" prop="settlementType">
              <!-- <template v-if="selectObj.settlementType === 1 || form.settlementType === 1">
                <a-select v-model="form.settlementType" disabled>
                  <a-select-option :value="1">票结</a-select-option>
                </a-select>
              </template>
              <template v-else>
                <a-select v-model="form.settlementType" disabled>
                  <a-select-option :value="1">票结</a-select-option>
                  <a-select-option :value="2">月结</a-select-option>
                </a-select>
              </template>-->
              <a-select v-model="form.settlementType" disabled>
                <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="所属销售" prop="seller">
              <a-input v-model="form.seller" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户名称" prop="custId">
              <a-auto-complete
                v-if="form.custId"
                :value="form.custId.toFixed(0)"
                @select="onSelect"
                @search="onSearch"
                disabled
              >
                <template slot="dataSource">
                  <a-select-option
                    v-for="(v,k) in custNameList"
                    :key="k"
                    :value="v.id.toFixed(0)"
                  >{{ v.name }}</a-select-option>
                </template>
              </a-auto-complete>
            </a-form-model-item>
            <a-form-model-item label="订单类型" prop="orderType">
              <a-select v-model="form.orderType" disabled>
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="DOMESTIC_TRADE_EXPORTS">内贸出口订单</a-select-option>
                <a-select-option value="DOMESTIC_TRADE_IMPORTS">内贸进口订单</a-select-option>
                <a-select-option value="FOREIGN_TRADE_EXPORTS">外贸出口订单</a-select-option>
                <a-select-option value="FOREIGN_TRADE_IMPORTS">外贸进口订单</a-select-option>
                <a-select-option value="UNITED_TRANSPORT_EXPORTS">联运出口订单</a-select-option>
                <a-select-option value="UNITED_TRANSPORT_IMPORTS">联运进口订单</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱号" prop="containerNo">
              <a-input :value="form.containerNo || '--'" style="width:100%" disabled />
            </a-form-model-item>
            <a-form-model-item label="发票" prop="invoiceType">
              <a-row>
                <a-col :span="16">
                  <a-select v-model="form.invoiceType" disabled>
                    <!-- <a-select-option value>请选择开票类型</a-select-option> -->
                    <a-select-option :value="1">增值税专用发票</a-select-option>
                    <a-select-option :value="2">增值税普通发票</a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="form.taxRate" disabled>
                    <!-- <a-select-option value>请选择税率</a-select-option> -->
                    <a-select-option v-if="form.invoiceType==='2'" :value="0">0%</a-select-option>
                    <a-select-option :value="6">6%</a-select-option>
                    <a-select-option :value="9">9%</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item label="操作员" prop="handlerId">
              <a-select v-model="form.handlerId" disabled>
                <a-select-option v-for="v in handlerList" :key="v.uiId">{{v.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
      <!-- 运输信息 -->
      <a-card :bordered="false">
        <div class="card-title">运输信息</div>
        <a-form-model-item
          label="运输条款"
          :label-col="{span:3}"
          :wrapper-col="{span:21}"
          prop="transportTerms"
        >
          <a-radio-group
            v-model="form.transportTerms"
            @change="radioChange"
            button-style="solid"
            size="large"
          >
            <a-radio-button v-if="form.transportTerms === 'DO-DO'" value="DO-DO">门到门</a-radio-button>
            <a-radio-button v-if="form.transportTerms === 'DO-CY'" value="DO-CY">门到港</a-radio-button>
            <a-radio-button v-if="form.transportTerms === 'CY-DO'" value="CY-DO">港到门</a-radio-button>
            <a-radio-button v-if="form.transportTerms === 'CY-CY'" value="CY-CY">港到港</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <template>
          <!-- 门到门 -->
          <div v-if="form.transportTerms=== 'DO-DO'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select v-model="form.startPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="发货地址" prop="consignorProvince">
                    <a-cascader
                      :options="options"
                      v-if="form.consignorProvince"
                      :default-value="[form.consignorProvince, form.consignorCity, form.consignorArea]"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange"
                      disabled
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consignorAddress">
                    <a-input v-model="form.consignorAddress" :max-length="100" disabled />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consignorPhone">
                    <a-input v-model="form.consignorPhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select v-model="form.endPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货地址" prop="consigneeProvince">
                    <a-cascader
                      :options="options"
                      v-if="form.consigneeProvince"
                      :default-value="[form.consigneeProvince, form.consigneeCity, form.consigneeArea]"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange2"
                      disabled
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consigneeAddress">
                    <a-input v-model="form.consigneeAddress" :max-length="100" disabled />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone">
                    <a-input v-model="form.consigneePhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 门到港 -->
          <div v-else-if="form.transportTerms=== 'DO-CY'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select v-model="form.startPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="发货地址" prop="consignorProvince">
                    <a-cascader
                      :options="options"
                      v-if="form.consignorProvince"
                      :default-value="[form.consignorProvince, form.consignorCity, form.consignorArea]"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange"
                      disabled
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consignorAddress">
                    <a-input v-model="form.consignorAddress" :max-length="100" disabled />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consignorPhone">
                    <a-input v-model="form.consignorPhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select v-model="form.endPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货人抬头" prop="consigneeTitle">
                    <a-input v-model="form.consigneeTitle" :max-length="50" disabled />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone" style="margin-top:44px;">
                    <a-input v-model="form.consigneePhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 港到门 -->
          <div v-else-if="form.transportTerms=== 'CY-DO'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select v-model="form.startPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="联系电话" prop="consignorPhone" style="margin-top:84px;">
                    <a-input v-model="form.consignorPhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select v-model="form.endPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货地址" prop="consigneeProvince">
                    <a-cascader
                      :options="options"
                      v-if="form.consigneeProvince"
                      :default-value="[form.consigneeProvince, form.consigneeCity, form.consigneeArea]"
                      :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                      placeholder="请选择省/市/区县"
                      @change="onChange2"
                      disabled
                    />
                  </a-form-model-item>
                  <a-form-model-item label="详细地址" prop="consigneeAddress">
                    <a-input v-model="form.consigneeAddress" :max-length="100" disabled />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone">
                    <a-input v-model="form.consigneePhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <!-- 港到港 -->
          <div v-else-if="form.transportTerms=== 'CY-CY'" class="borderframe">
            <!-- 起运信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                  <div>起运信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="起运港" prop="startPortId">
                    <a-select v-model="form.startPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                    <a-input v-model="form.consignor" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="联系电话" prop="consignorPhone" style="margin-top:84px;">
                    <a-input v-model="form.consignorPhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 目的信息 -->
            <div class="border">
              <a-row>
                <a-col :span="3" class="YunSHU">
                  <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                  <div>目的信息</div>
                </a-col>
                <a-col :span="9">
                  <a-form-model-item label="目的港" prop="endPortId">
                    <a-select v-model="form.endPortId" disabled>
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option
                        v-for="(item,index) in portList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                    <a-input v-model="form.consignee" :max-length="10" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="收货人抬头" prop="consigneeTitle">
                    <a-input v-model="form.consigneeTitle" :max-length="50" disabled />
                  </a-form-model-item>
                  <a-form-model-item label="联系电话" prop="consigneePhone" style="margin-top:44px;">
                    <a-input v-model="form.consigneePhone" :max-length="20" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </template>
        <a-row :gutter="[20]" style="margin-top:20px">
          <a-col :span="12">
            <a-form-model-item
              label="装货时间"
              prop="loadingTime"
              :label-col="{span:6}"
              :wrapper-col="{span:18}"
            >
              <a-date-picker
                v-if="form.loadingTime"
                :default-value="momentDate(form.loadingTime, dateFormat)"
                @change="onChangeTime"
                :show-time="{ format: 'HH:mm' }"
                :format="dateFormat"
                disabled
              >
                <a-icon slot="suffixIcon" type="calendar" />
              </a-date-picker>
            </a-form-model-item>
            <a-form-model-item label="备注" :label-col="{span:6}" :wrapper-col="{span:18}">
              <a-input
                v-model="form.sellerRemark"
                type="textarea"
                :auto-size="{ minRows: 3, maxRows: 3 }"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
      <!-- 费用信息 -->
      <a-card :bordered="false">
        <div class="card-title">费用信息</div>
        <!-- 应收 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-s.png" alt />
          <span>应收</span>
        </div>
        <a-row :gutter="[20]">
          <a-col :span="12">
            <a-form-model-item label="应收客户（元/箱）" prop="receivableCustAmount">
              <a-row>
                <a-col :span="16">
                  <a-input-number
                    :min="0.01"
                    :precision="2"
                    v-model="form.receivableCustAmount"
                    style="width:100%"
                    disabled
                  />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="form.receivableCustCurrency" disabled>
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[20]" v-if="form.orderType === 'DOMESTIC_TRADE_IMPORTS'">
          <a-col :span="12">
            <a-form-model-item label="应收海船费用(元/箱)">
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="form.receivableShipAmount"
                style="width:100%"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="海船公司">
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.receivableShipId"
                @search="onSearch2"
                disabled
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in receiveList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 应付 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-f.png" alt />
          <span>应付</span>
        </div>
        <a-row :gutter="[20]">
          <a-col :span="12">
            <a-form-model-item label="应付海船费用(元/箱)" prop="payableShipAmount">
              <a-row>
                <a-col :span="16">
                  <a-input-number
                    :min="0"
                    :max="999999999999.99"
                    :precision="2"
                    v-model="form.payableShipAmount"
                    style="width:100%"
                    disabled
                  />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="form.payableShipCurrency" disabled>
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item label="始拖车费（元/箱）" prop="payableStartTruckAmount">
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="form.payableStartTruckAmount"
                style="width:100%"
                disabled
              />
            </a-form-model-item>
            <a-form-model-item label="终拖车费（元/箱）" prop="payableEndTruckAmount">
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="form.payableEndTruckAmount"
                style="width:100%"
                disabled
              />
            </a-form-model-item>
            <a-form-model-item label="保险费（元/箱）">
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="calcResult"
                style="width:100%"
                disabled
              />
              <!-- <div class="clickOnlyInput" @click="showModal">{{calcResult}}</div> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="海船公司" prop="payableShipId">
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableShipId"
                @search="onSearch3"
                disabled
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="始拖车公司" prop="payableStartTruckId">
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableStartTruckId"
                @search="onSearch3"
                disabled
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="终拖车公司" prop="payableEndTruckId">
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableEndTruckId"
                @search="onSearch3"
                disabled
              >
                <a-select-option key>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 毛利 -->
        <div class="feeTop" style="margin-top:30px">
          <div class="iconTextMix">
            <img src="@@/images/icon-f.png" alt />
            <span>毛利</span>
          </div>
        </div>
        <a-list class="calcList calcList_2" :grid="{ column: 4 }" style="margin-left：25px;">
          <a-list-item style="width:23.4%;">
            <a-card title="当前总应收">
              ¥
              <span class="moneyCss">{{totalReceiveFee.toFixed(2)}}</span>
            </a-card>
          </a-list-item>
          <a-list-item class="sale_yf" style="width:20.4%;">
            <a-card title="当前总应付">
              ¥
              <span class="moneyCss">{{totalPayFee.toFixed(2)}}</span>
            </a-card>
          </a-list-item>
          <a-list-item class="sale_ml" style="width:27%;">
            <a-card title="当前毛利">
              ¥
              <span class="moneyCss">{{(totalReceiveFee - totalPayFee).toFixed(2)}}</span>
            </a-card>
          </a-list-item>
          <a-list-item class="sale_ml" style="width:27%;">
            <a-card title="原始毛利">
              ¥
              <span class="moneyCss">{{originalGrossProfit.toFixed(2)}}</span>
            </a-card>
          </a-list-item>
        </a-list>
      </a-card>
      <!-- 合同 -->
      <a-card :bordered="false" class="yewu_photo">
        <div class="card-title">货物托运委托书</div>
        <viewer v-if="showPic" :images="form.contractPics.split(',')" :options="{url: 'data-x'}">
          <template v-for="(src,index) in form.contractPics.split(',')">
            <img
              style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee;"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
              v-if="src"
            />
          </template>
        </viewer>
      </a-card>
      <a-modal
        v-model="visible"
        title="保险费"
        :body-style="{padding:'40px 40px 20px 20px'}"
        :width="650"
        centered
        @cancel="insuranceCancel"
        @ok="insuranceOk"
        destroyOnClose
      >
        <a-form-model-item label="货值（元/箱）" prop="payableInsuranceAmount">
          <a-input-number
            :min="0.01"
            :max="999999999999.99"
            :precision="2"
            v-model="form.payableInsuranceAmount"
            @change="calcTotalPrice"
            style="width:100%"
          />
        </a-form-model-item>
        <a-form-model-item label="选择保险公司" prop="payableInsuranceId">
          <a-select v-model="form.payableInsuranceId" style="width:100%" @select="insuranceSelect">
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item,index) in insuranceList"
              :key="index"
              :value="item.custId"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="保险费率"
        >{{ this.form.payableInsuranceRate || insuranceRate}}{{(this.form.payableInsuranceRate ||insuranceRate)? '%': ''}}</a-form-model-item>
        <a-form-model-item label="保险金额（元/箱）">{{calcResult}}</a-form-model-item>
      </a-modal>
    </a-form-model>
    <div class="creat_button">
      <!-- <a-button
        type="primary"
        @click="save"
        :loading="btnStatus"
        style="float:right;margin-top:12px"
      >通过</a-button>
      <a-button
        type="danger"
        ghost
        @click="notPass"
        :loading="btnStatus2"
        style="float:right;margin:12px 20px 0 0"
      >不通过</a-button>-->
      <a-button
        ghost
        type="primary"
        @click="showOrderChange"
        style="float:right;margin:12px 20px 0 0"
      >改单记录</a-button>
    </div>
    <!-- 改单记录 -->
    <a-modal
      v-model="containerVisible"
      title="改单记录"
      :body-style="{padding:'0 24px 24px 24px'}"
      :width="1000"
      centered
      :footer="null"
      destroyOnClose
    >
      <a-descriptions :column="2" bordered style="margin-top:30px">
        <a-descriptions-item label="公司编号">{{changOrderInfo.orderCode}}</a-descriptions-item>
        <a-descriptions-item label="改单时间">{{changOrderInfo.createdDate}}</a-descriptions-item>
        <a-descriptions-item label="订单状态">{{changOrderInfo.orderShipInfoStatusName}}</a-descriptions-item>
        <a-descriptions-item label="改单人">{{changOrderInfo.modifier}}</a-descriptions-item>
      </a-descriptions>
      <a-table
        :loading="containerLoading"
        :columns="containerColumns"
        :data-source="containerData"
        class="tableMargin"
        :pagination="false"
        :row-key="(record,index) => index"
      >
        <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
        <template slot="originalData" slot-scope="text, record">
          <viewer
            v-if="record.originalData.slice(0,8) === 'https://'"
            :images="record.originalData.split(',')"
            :options="{url: 'data-x'}"
          >
            <template v-for="(src, index) in record.originalData.split(',')">
              <img
                style="width:100px;height:100px;margin:0 10px 10px 0;border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
              />
            </template>
          </viewer>
          <span v-else>{{record.originalData || '--'}}</span>
        </template>
        <template slot="modifiedData" slot-scope="text, record">
          <viewer
            v-if="record.modifiedData.slice(0,8) === 'https://'"
            :images="record.modifiedData.split(',')"
            :options="{url: 'data-x'}"
          >
            <template v-for="(src, index) in record.modifiedData.split(',')">
              <img
                style="width:100px;height:100px;margin:0 10px 10px 0;border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
              />
            </template>
          </viewer>
          <span v-else>{{record.modifiedData || '--'}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      title="审核不通过"
      :visible="notPassVisible"
      :width="600"
      :destroyOnClose="true"
      @ok="handleOk"
      @cancel="handleCancel"
      centered
    >
      <a-row>
        <a-col :span="24">
          <a-form-model
            ref="ruleForm3"
            :model="form3"
            :rules="rules3"
            :label-col="{span: 3}"
            :wrapper-col="{span: 20}"
          >
            <p>如果判定为审核不通过，订单将打回给销售重新填写，请你填写审核不通过的原因，方便销售修改后重新提交审核。</p>
            <a-form-model-item prop="auditRemark" label="原因">
              <a-textarea v-model="form3.auditRemark" :rows="4"></a-textarea>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import {mixin} from '@/common/common'
import {
  getOrderInfoModifyById,
  queryCustNameList,
  queryPortNameList,
  queryContainerTypeList,
  queryCustInsuranceDown,
  queryGoodsData,
  queryOrderModifyRecordById
} from '@/api/salesCenter'
import { auditOrderInfoModify } from '@/api/orderCenter'
import { querySellerDown, queryBaseAreaList, getLatestRate } from '@/api'
import _ from 'lodash/debounce'
import upload from '@/components/UpLoad'
import moment from 'moment'
import 'viewerjs/dist/viewer.css'
const formMessage = `必填项不能为空`
const containerColumns = [
  {
    title: '序号',
    width: 60,
    scopedSlots: { customRender: 'rn' }
  },
  {
    title: '改单字段',
    dataIndex: 'modifiedField',
    customRender: (text, record, index) => {
      return record.modifiedField || '--'
    }
  },
  {
    title: '原数据',
    dataIndex: 'originalData',
    scopedSlots: {
      customRender: 'originalData'
    }
  },
  {
    title: '新数据',
    dataIndex: 'modifiedData',
    scopedSlots: {
      customRender: 'modifiedData'
    }
  }
]
export default {
  props: ['id'],
  mixins: [mixin],
  data () {
    this.onSearch = _(this.onSearch, 800)
    this.onSearch2 = _(this.onSearch2, 800)
    this.onSearch3 = _(this.onSearch3, 800)
    this.goodsListChange = _(this.goodsListChange, 800)
    return {
      form3: {
        auditRemark: ''
      },
      rules3: {
        auditRemark: [{ required: true, message: formMessage, trigger: 'blur' }]
      },
      notPassVisible: false,
      containerLoading: false,
      changOrderInfo: {},
      containerData: [],
      containerVisible: false,
      containerColumns,
      btnStatus: false,
      btnStatus2: false,
      goodsList: [],
      dateFormat: 'YYYY-MM-DD HH:mm',
      basePath: '/orderCenter',
      routes: [
        {
          path: '/changeOrderAudit',
          breadcrumbName: '改单审核'
        },
        {
          path: '',
          breadcrumbName: '订单详情'
        }
      ],
      custNameList: [], // 1
      receiveList: [], // 2
      payList: [], // 3
      containerList: [],
      portList: [],
      options: [],
      handlerList: [],
      insuranceList: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      selectObj: {},
      form: {},
      visible: false,
      insuranceIndex: undefined,
      insuranceRate: undefined,
      calcResult: '',
      showPic: false,
      totalReceiveFee: 0,
      totalPayFee: 0,
      originalGrossProfit: 0,
      rate: undefined
    }
  },
  methods: {
    latestRateRequest (e, param) {
      getLatestRate(e)
        .then(res => {
          // console.log(res.data)
          // console.log(param)
          let rate = res.data.rate
          this.rate = rate
          let totalReceiveFee
          let totalPayFee
          totalReceiveFee = (param.receivableCustAmount) * (param.receivableCustCurrency === 'CNY' ? 1 : rate) + param.receivableShipAmount
          totalPayFee = (param.payableShipAmount) * (param.payableShipCurrency === 'CNY' ? 1 : rate) + param.payableEndTruckAmount + (param.payableInsuranceRate * param.payableInsuranceAmount / 100) + param.payableStartTruckAmount
          this.originalGrossProfit = totalReceiveFee - totalPayFee
          this.totalReceiveFee = totalReceiveFee
          this.totalPayFee = totalPayFee
        })
    },
    goodsListRequest (e) {
      queryGoodsData(e).then(res => {
        // console.log(res.data)
        this.goodsList = res.data.list
      })
    },
    goodsListChange (e) {
      this.goodsListRequest({
        pageSize: 0,
        name: e,
        status: 1
      })
    },
    handlerListRequest (e) {
      querySellerDown(e)
        .then(res => {
          // console.log(res.data)
          this.handlerList = res.data
          this.handlerList = res.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
        })
        .catch(rs => {})
    },
    radioChange (e) {
      // // console.log(e.target.value)
      this.form.transportTerms = e.target.value
      this.form.startPortId = ''
      this.form.consignor = ''
      this.form.consignorProvince = ''
      this.form.consignorCity = ''
      this.form.consignorArea = ''
      this.form.consignorAddress = ''
      this.form.consignorPhone = ''
      this.form.endPortId = ''
      this.form.consignee = ''
      this.form.consigneePhone = ''
      this.form.consigneeProvince = ''
      this.form.consigneeCity = ''
      this.form.consigneeArea = ''
      this.form.consigneeAddress = ''
      this.form.consigneeTitle = ''
    },
    momentDate (date, format) {
      return moment(date)
    },
    insuranceSelect (val, option) {
      // console.log(val)
      // console.log(option.key)
      this.insuranceIndex = option.key
      this.insuranceRate = this.insuranceList[option.key].insuranceRate
      this.form.payableInsuranceRate = this.insuranceList[option.key].insuranceRate
      this.calcTotalPrice()
    },
    orderInfoRequest (e) {
      getOrderInfoModifyById(e)
        .then(res => {
          this.form = res.data
          this.showPic = true
          this.calcResult = (res.data.payableInsuranceRate * res.data.payableInsuranceAmount / 100).toFixed(2)
          this.latestRateRequest({}, res.data)
          // console.log(res.data)
        })
        .catch(rs => {})
    },
    calcTotalPrice () {
      // console.log(111)
      let price = Number(this.form.payableInsuranceAmount)
      if (this.form.payableInsuranceRate) {
        let insuranceRate = Number(this.insuranceRate)
        if (!isNaN(price) && !isNaN(insuranceRate)) {
          this.calcResult = (price * insuranceRate / 100).toFixed(2)
        } else {
          this.calcResult = ''
        }
      }
    },
    custNameListRequest (e, type) {
      queryCustNameList(e)
        .then(res => {
          // console.log(res.data)
          if (type === 1) {
            this.custNameList = res.data
          } else if (type === 2) {
            this.receiveList = res.data
          } else if (type === 3) {
            this.payList = res.data
          }
        })
        .catch(rs => {})
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    queryAddress () {
      queryBaseAreaList({})
        .then(res => {
          this.options = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => {})
    },
    insuranceListRequest (e) {
      queryCustInsuranceDown(e)
        .then(res => {
          this.insuranceList = res.data
        })
        .catch(rs => {})
    },
    addOrderRequest (e) {
      auditOrderInfoModify(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功！')
            setTimeout(() => {
              this.$router.push({
                path: '/orderCenter/changeOrderAudit'
              })
              this.btnStatus = false
              this.btnStatus2 = false
            }, 800)
          }
        })
        .catch(rs => {
          this.btnStatus = false
          this.btnStatus2 = false
        })
    },
    onSearch (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'CUSTOMER'
        },
        1
      )
    },
    onSelect (val, option) {
      this.form.custId = this.custNameList[option.key].id
      this.form.settlementType = this.custNameList[option.key].settlementType
      this.selectObj = this.custNameList[option.key]
    },
    onSearch2 (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'SUPPLIER',
          isReceivable: 1
        },
        2
      )
    },
    onSelect2 (val, option) {
      this.form.receivableShipId = this.receiveList[option.key].id
    },
    onSearch3 (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'SUPPLIER',
          isPayable: 1
        },
        3
      )
    },
    onSelect3 (val, option) {
      this.form.payableShipId = this.payList[option.key].id
    },
    onSelect4 (val, option) {
      this.form.payableStartTruckId = this.payList[option.key].id
    },
    onSelect5 (val, option) {
      this.form.payableEndTruckId = this.payList[option.key].id
    },
    showModal () {
      this.visible = true
    },
    insuranceOk () {
      if (
        this.form.payableInsuranceId &&
        this.form.payableInsuranceRate &&
        this.form.payableInsuranceAmount
      ) {
        this.visible = false
      } else {
        this.$message.error('填写信息有误！')
        return false
      }
    },
    insuranceCancel () {
      this.visible = false
    },
    contractPics (e) {
      this.form.contractPics = e
    },
    onChange (value, selectedOptions) {
      this.form.consignorProvince = value[0]
      this.form.consignorCity = value[1]
      this.form.consignorArea = value[2]
    },
    onChange2 (value, selectedOptions) {
      this.form.consigneeProvince = value[0]
      this.form.consigneeCity = value[1]
      this.form.consigneeArea = value[2]
    },
    onChangeTime (date, dateString) {
      this.form.loadingTime = dateString
    },
    save () {
      let _s = this
      let _form = _s.form
      let payableShipAmount = _form.payableShipAmount || _form.payableShipAmount === 0
      let payableShipId = _form.payableShipId
      let payableStartTruckAmount = _form.payableStartTruckAmount || _form.payableStartTruckAmount === 0
      let payableStartTruckId = _form.payableStartTruckId
      let payableEndTruckAmount = _form.payableEndTruckAmount || _form.payableEndTruckAmount === 0
      let payableEndTruckId = _form.payableEndTruckId
      if ((!payableShipAmount && payableShipId) || (payableShipAmount && !payableShipId)) {
        _s.$message.error('应付 海船费用、海船公司信息不完整！')
        return false
      }
      if ((!payableStartTruckAmount && payableStartTruckId) || (payableStartTruckAmount && !payableStartTruckId)) {
        _s.$message.error('应付 始拖车费、始拖车公司信息不完整！')
        return false
      }
      if ((!payableEndTruckAmount && payableEndTruckId) || (payableEndTruckAmount && !payableEndTruckId)) {
        _s.$message.error('应付 终拖车费、终拖车公司信息不完整！')
        return false
      }
      _s.$refs.form.validate(valid => {
        if (valid) {
          _s.btnStatus = true
          _s.addOrderRequest({
            status: 1,
            id: _s.id
          })
        }
      })
    },
    notPass () {
      this.notPassVisible = true
    },
    handleOk () {
      let _s = this
      _s.$refs.ruleForm3.validate(valid => {
        if (valid) {
          _s.btnStatus2 = true
          _s.addOrderRequest({
            ..._s.form3,
            status: 2,
            id: _s.id
          })
          _s.handleCancel()
        }
      })
    },
    handleCancel () {
      this.notPassVisible = false
    },
    OrderChangeRequest (e) {
      this.containerLoading = true
      queryOrderModifyRecordById(e)
        .then(res => {
          // console.log(res.data)
          this.changOrderInfo = res.data
          this.containerData = res.data.recordList
          setTimeout(() => {
            this.containerLoading = false
          }, 300)
        })
        .catch(rs => {})
    },
    showOrderChange () {
      this.OrderChangeRequest({
        id: this.id
      })
      this.containerVisible = true
    }
  },
  mounted () {
    this.goodsListRequest({
      pageSize: 0,
      name: '',
      status: 1
    })
    this.handlerListRequest({
      type: 1,
      dataRole: 'CONTAINER_OPR',
      status: 1
    })
    this.orderInfoRequest({
      id: this.id
    })
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'CUSTOMER'
      },
      1
    )
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isReceivable: 1
      },
      2
    )
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isPayable: 1
      },
      3
    )
    this.containerListRequest({
      status: 1
    })
    this.portListRequest({
      status: 1
    })
    this.queryAddress()
    this.insuranceListRequest({
      belongCompany: 'JIA_HUA'
    })
  },
  components: {
    upload
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin: 0px 24px 24px 24px;
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 30px;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .iconTextMix {
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px 0;
    padding-left: 24px;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      margin-left: 10px;
      line-height: 25px;
      font-weight: bold;
    }
  }
  .clickOnlyInput {
    height: 32px;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
  .borderframe {
    border: 1px solid #f0f0f0;
    border-top: none;
    margin: 0 50px;
  }
  .border {
    padding: 24px;
    border-top: 1px solid #f0f0f0;
    border-radius: 4px;
  }
}
.ant-col-12 {
  padding-right: 50px;
}
.yewu_photo .ant-form-item {
  margin-bottom: 0;
}
.borderframe .ant-form-item {
  margin-bottom: 2px;
}
.YunSHU {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  padding: 15px 24px 15px 0;
  background: url(../../../static/images/border-r.png) no-repeat right;
  background-size: 1px 100%;
}
</style>
<style lang="less" scoped>
.card-title {
  position: relative;
  padding-left: 16px;
  font-size: 18px;
  line-height: 1;
  color: #000;
  margin-bottom: 24px;
  &:before {
    content: '';
    width: 5px;
    height: 18px;
    background: #1890ff;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: -1px;
  }
}
.feeTop {
  display: flex;
  align-items: center;
  .iconTextMix {
    flex: 1;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px 0;
    padding-left: 24px;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      margin-left: 10px;
      line-height: 25px;
      font-weight: bold;
    }
  }
}
.ant-card {
  .calcList {
    text-align: center;
    margin-left: 24px;
    span.moneyCss {
      color: orange;
      font-size: 24px;
      margin-left: 5px;
    }
  }
}
.calcList .ant-card {
  margin: 0;
}
</style>
